<template>
    <div class="box-right clearficx">
        <div class="nav-right-top">
            <div @click="Look" style="position: relative;">
                浏览记录
                <div :class="borderB?'aaa':''"></div>
            </div>

        </div>
        <div class="right-box">
            <div class="operator_line">
                <div class="search">
                    <div class="s-input">
                        <input type="text" class="text-i" v-model="keyword">
                        <span class="icon">
                            <Search class="s-icon"></Search>
                        </span>
                    </div>
                    <div class="search-button" @click="search()">搜索</div>
                </div>
                <div class="right-text" @click="changeDel" v-if="flag">
                    <span>批量删除</span>
                </div>
                <div class="right-text" style="color: #f93684;" v-else>
                    <span class="operator_btn" @click="noBtn">取消</span>
                    <span class="operator_btn" style="margin-right: 20px;" @click="delect">确定<span
                            v-show="amount!=0?true:false">({{amount}})</span></span>
                    <span class="operator_btn" v-if="flagall" @click="allCheck">全选</span>
                    <span class="operator_btn" v-else @click="allCheck">取消全选</span>
                </div>
            </div>
            <div class="table_paging">
                <table style="width: 100%; min-height: 200px;" v-if="content" v-loading="loading">
                    <tr class="tr-tb" v-for="(item,index) in trainingStore.HistoryList.content" :key="item.id">
                        <a :href="item.url" target="_blank">
                            <td class="first-td" style="width: 660px;">
                                <div class="cell">
                                    <div class="img-box"><img :src="item.momentBackup.cover[0]" alt=""></div>
                                    <div class="right_info">
                                        <div class="ellipsis" v-html="item.momentTitle"></div>
                                        <div style="font-size: 14px; color: rgb(125, 128, 144);">动态</div>
                                        <div>
                                            <div class="avatar">
                                                <img :src="item.momentBackup.creatorBackup.avatar" alt="">
                                            </div>
                                            <div class="text-ava" style="float: left; line-height: 30px; height: 100%;">
                                                {{item.momentBackup.creatorBackup.name}}</div>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </a>
                        <td class="first-td isright">
                            <div class="cell cell1">
                                <span style="color: rgb(17, 17, 17); font-size: 14px;">{{time[index]}}</span>
                            </div>
                        </td>
                        <td class="first-td isright">
                            <div class="cell cell1">
                                <div style="padding-right: 6px; ">
                                    <span
                                        style="display: block; width: 34px; font-size: 14px;cursor: pointer;vertical-align: top;color: #b1b3bc;"
                                        v-if="flag" @click="delIndex(index)">删除</span>
                                    <span
                                        style="display: block; width: 34px; cursor: pointer;vertical-align: top;line-height: 20px;"
                                        :class="item.flag?'active-btn':''" v-else>
                                        <SuccessFilled @click="checkBtn(index)"
                                            style="cursor: pointer;display:block;width: 20px;height: 20px; " />
                                    </span>
                                </div>
                            </div>
                        </td>
                    </tr>
                </table>
                <div v-else
                    style="min-height: 60px;text-align: center; font-size: 12px; display: flex;justify-content: center; align-items: center; border-bottom: 1px solid #909399; color: #909399;">
                    无更多内容
                </div>
                <el-pagination v-model:currentPage="currentPage1" :page-size="pageSize" small
                    layout=",->, prev, pager, next" :total="total" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" v-show="total>10" />
            </div>
        </div>
        <!-- 提示框 -->
        <el-dialog v-model="centerDialogVisible" width="420px" align-center>
            <div>
                <Warning style="width:25px;height: 25px; color: #e6a23c;float: left;"></Warning>
                <div style="margin-top: 6px; height: 24px; float: left;">此操作将删除该项, 是否继续?</div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="centerDialogVisible = false" class="noBtn">取消</el-button>
                    <el-button type="primary" class="yesBtn" @click="yesBtn">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
   
<script setup lang="ts">
import moment from 'moment'
import {
    Search,
    SuccessFilled,
    Clock,
    Warning
} from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { ref, onMounted, nextTick } from 'vue'
import useTrainingStore from '../../stores/training'
import language from '../../utils/moment-zhcn'
import { fa, tr } from 'element-plus/es/locale';
//浏览记录高亮
let borderB = ref(false)
// 判断有没有内容
let content = ref(true)
// 搜索关键字
// isloadng
let loading = ref(false)
let keyword = ref('')
const trainingStore = useTrainingStore()
// 控制提示框
const centerDialogVisible = ref(false)
// 页码数
const currentPage1 = ref(1)
// 总条数
let total = ref(0)
let pageSize = ref(10)
// 控制高亮，确认取消全选和批量删除的切换
let flag = ref(true)
// 控制选中按钮高亮
let flagbtn = ref(false)
const changeDel = () => {
    flag.value = !flag.value
}
// 判断全选及确定条数
let num = ref(0)
// 判断全选取消全选的切换
let flagall = ref(true)
// 时间
let time = ref([])
// 确定后面的数字
let amount = ref(0)
// 删除需要的参数ids
let idDel = ref([])
const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
    currentPage1.value = val
    getHistory()
}
onMounted(() => {
    getHistory()
    // nextTick(()=>{
    //     console.log(tab);
    // })
})
// 搜索
const search = async () => {
    loading.value = true
    await trainingStore.getSearch(pageSize.value, currentPage1.value - 1, keyword.value)
    total.value = trainingStore.HistoryList.totalElements
    if (trainingStore.HistoryList.content.length > 0) {
        content.value = true
    } else {
        content.value = false
    }
    // 检索文字高亮
    trainingStore.HistoryList.content.map((item: any, index: any) => {
        if (keyword.value) {
            /**
             * 使用正则表达式进行全文匹配关键词
             * ig : 表示 全文查找 ,忽略大小写
             *  i : 忽略大小写
             *  g : 全文查找
             *
             * 使用字符串的replace方法进行替换
             * stringObject.replace('被替换的值',替换的值)
             */
            let replaceReg = new RegExp(keyword.value, 'ig')
            let replaceString = `<span style="color: #f93684">${keyword.value}</span>`
            trainingStore.HistoryList.content[index].momentTitle = item.momentTitle.replace(replaceReg, replaceString)
        }
    })
    loading.value = false
}
const getHistory = async () => {
    loading.value = true
    await trainingStore.getHistory(pageSize.value, currentPage1.value - 1)
    let arr = trainingStore.HistoryList.content.map(item => {
        let timer
        // 今日日期
        let timeDay = moment().format('YYYY-MM-DD')
        // 更新日期
        let update = moment(item.updateTime).format('YYYY-MM-DD')
        // 如果是同一天返回true
        if (moment(update).isSame(timeDay)) {
            moment.locale('zh-cn', language)
            // 格式化更新日期
            let update1 = moment(item.updateTime).format('YYYY-MM-DD HH:mm:ss')
            // 一天以内显示多少小时前
            timer = moment(update1).fromNow()
        } else {
            let update1 = moment(item.updateTime).format('YYYY-MM-DD HH:mm:ss')
            // 自定义格式
            timer = moment(update1).calendar(timeDay, {
                lastDay: '[昨天]HH:mm',
                lastWeek: 'MM-DD'
            });
        }
        return timer
    })
    time.value = arr
    total.value = trainingStore.HistoryList.totalElements
    loading.value = false
}
// 点击批量删除的确定按钮
const delect = () => {
    if (amount.value > 0) {
        centerDialogVisible.value = !centerDialogVisible.value
    } else {
        ElMessage({
            message: '请选择要删除的条目!'
        })
    }
}
// 浏览记录点击
const Look = () => {
    borderB.value = true
    pageSize.value = 10
    currentPage1.value = 1
    getHistory()
}
// 单选
const checkBtn = (index: any) => {
    trainingStore.HistoryList.content[index].flag = !trainingStore.HistoryList.content[index].flag
    // 全部选中后的取消全选显示
    let result = trainingStore.HistoryList.content.every((item: any) => {
        return item.flag === true
    })
    console.log(result);
    if (result) {
        flagall.value = false
    } else {
        flagall.value = true
    }
    // console.log(flagall.value);
    let n = 0
    for (let i = 0; i < trainingStore.HistoryList.content.length; i++) {
        if (trainingStore.HistoryList.content[i].flag) {
            n++
        }
    }
    // console.log(n);
    amount.value = n
}
// 确认按钮发送删除请求
const yesBtn = () => {
    let ids
    // 这是批量删除的地方
    let idAll = trainingStore.HistoryList.content.map((item: any) => {
        if (item.flag) {
            return item.id
        }
    })
    let result = idAll.some((item: any) => {
        return item
    })
    if (!result) {
        ids = idDel.value
    } else {
        ids = idAll
    }
    trainingStore.getDelHistory(ids)
    getHistory()
    // console.log(ids);
    amount.value = 0
    centerDialogVisible.value = false
}
// 批量删除取消按钮
const noBtn = () => {
    centerDialogVisible.value = false
    flag.value = !flag.value
    // 把flag全变成false，防止删除与选中状态联动
    trainingStore.HistoryList.content.forEach((item: any) => {
        item.flag = false
    })
    amount.value = 0
}
// 全选
const allCheck = () => {
    let result = trainingStore.HistoryList.content.every((item: any) => {
        return item.flag === true
    })
    // console.log(result);
    amount.value = trainingStore.HistoryList.content.length
    if (result) {
        trainingStore.HistoryList.content.forEach((item: any) => {
            item.flag = false
            flagall.value = true
            amount.value = 0
        });
    } else {
        trainingStore.HistoryList.content.forEach((item: any) => {
            item.flag = true
            flagall.value = false
        });
    }

}
// 删除按钮
const delIndex = (index: number) => {
    centerDialogVisible.value = true
    let ids = trainingStore.HistoryList.content[index].id
    idDel.value = [ids]

    // centerDialogVisible.value = false

}
</script>
   
<style scoped>
.clearficx::after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearficx {
    *zoom: 1;
}

.box-right {
    margin: 10px 5px 0 0;
    float: right;
    width: 980px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.nav-right-top {
    background-color: #FFFFFF;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 26px 30px;
    color: #111;
    font-size: 14px;
}


.right-box {
    min-height: 600px;
    margin-top: 10px;
    background-color: #FFFFFF;
    overflow: hidden;
    margin-bottom: 20px;
    border-radius: 4px;
}


.operator_line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 40px 10px 31px;
    color: #111;
    font-size: 14px;
}

.search {
    display: inline-block;
    white-space: nowrap;
    padding-right: 30px;
}

.s-input {
    position: relative;
    font-size: 14px;
    display: inline-block;
    width: 100%;
}

.text-i {
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: none;
    padding: 0 40px;
    width: 100%;
}

.icon {
    position: absolute;
    left: 10px;
    top: 0;
    color: #c0c4cc;
    height: 100%;
    text-align: center;
    line-height: 48px;
}

.s-icon {
    width: 18px;
    line-height: 40px;
    font-style: normal;
    font-weight: 400;
}

.search-button {
    background: #f5f7f9;
    border-radius: 4px;
    color: #7d8090;
    font-size: 14px;
    display: inline-block;
    padding: 12px 17px;
    margin-left: 10px;
    cursor: pointer;
}

.right-text {
    display: flex;
    align-items: center;
    color: #111;
    font-size: 14px;
}

.table_paging {
    padding: 0 35px 0 22px;
    margin-bottom: 20px;
    min-height: 700px;
}

/deep/ .el-loading-spinner .path {
    stroke: #f93684
}

/deep/ .el-loading-text {
    color: #f93684;
}

.tr-tb {
    font-size: 12px;
    width: 100%;
    border-bottom: 1px solid #ebeef5;
    transition: all .6s;
}

.tr-tb:hover {
    background: #ebeef5;
}

.first-td {
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
    padding: 8px 0;
}

.cell {
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    line-height: 23px;
    display: flex;
    color: #111;
    padding: 10px 10px;
}

.cell1 {

    justify-content: flex-end;
}

.img-box {
    cursor: pointer;
    position: relative;
    width: 169px;
    height: 101px;

}

.img-box img {
    width: 100%;
    height: 100%;
    border-radius: 4px;
}

.right_info {
    padding: 4px 0 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left: 17px;
    font-size: 16px;
    color: #111;
}

.ellipsis {
    padding-right: 20px;
    cursor: pointer;
    box-sizing: border-box;
    overflow: hidden;
    font-size: 16px;
    color: #111;

}

.avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 11px;
    background-size: cover;
    background-position: 50%;
    float: left;
}

.avatar img {
    border-radius: 50%;
    width: 100%;
    height: 100%;
}

.operator_btn {
    margin-left: 18px;
    cursor: pointer;
}

.isright {
    text-align: right;
}

.yesBtn {
    color: #fff;
    background-color: #f93684;
    border-color: #f93684;
}

.yesBtn:hover {
    background: #fa5e9d;
    border-color: #fa5e9d;
    color: #fff;
}

.noBtn {
    background: #fff;
    color: #606266;
}

.noBtn:hover {
    color: #f93684;
    border-color: #fdc3da;
    background-color: #feebf3;
}

.active-right {
    background-color: #f93684;
    color: #fff;
}

.aaa {
    position: absolute;
    background-color: #fff;
    height: 4px;
    width: 37px;
    bottom: -25px;
    left: 10px;
    background-color: #f93684;
}

.active-btn {
    color: #f93684;
}
</style>